<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <!-- 导入表格需要的包 -->

    <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <script src="https://cdn.staticfile.org/xlsx/0.14.1/xlsx.full.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css"
    />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
  </head>

  <body>
    <div id="app">
      <avue-crud
        :defaults.sync="defaults"
        :data="data"
        :option="option"
        v-model="form"
        @row-save="rowSave"
      ></avue-crud>
    </div>
  
  <script>
     new Vue({
        el: "#app",
      data() {
        return {
          defaults: {},
          data: [{ text1: 0,}],
          form: {},
          option: {
            isDialogLoading:false,
            column: [
              {
                label: "内容1",
                prop: "text1",
                type: "radio",
                changeTdShow(result){
                    if(result ==0) {
                        return "<span class='el-tag el-tag--success el-tag--light'>$v</span>"
                    }else{
                        return "<span class='el-tag el-tag--info el-tag--light'>$v</span>"
                    }
                },
                dicData: [
                  {
                    label: "显示",
                    value: 0
                  },
                  {
                    label: "隐藏",
                    value: 1
                  }
                ]
              },
              {
                label: "内容2",
                prop: "text2",
                display: true
              },
              {
                label: "内容3",
                prop: "text3"
              }
            ]
          }
        };
      },
      mounted(){
          setTimeout(()=>{
            console.log('this.defaults: ', this.defaults);
          },0)
      },
      methods:{
        rowSave(form, done, loading) {
            console.log("form: ", form);
            console.log("我点击了保存");
            setTimeout(function(){
                done();
            },3000)
           
          }
      },
      watch: {
        "form.text1"(val) {
         
        //   if (val == 0) {
        //     this.defaults.text2.display = true;
        //     this.defaults.text3.label = "内容3";
        //   } else {
        //     this.defaults.text2.display = false;
        //     this.defaults.text3.label = "有没有发现我变了";
        //   }
        }
      }
    });
  </script>
  </body>
</html>
